<template>
  <el-dialog
    title="题目预览"
    :visible="showQuestion"
    width="45%"
    @close="onClose"
    >
    <!--  题型行 -->
    <el-row class="questionType">
      <el-col :span="6"><span>【题型】:{{bzgData.questionType | changeNumber }}</span></el-col>
      <el-col :span="6"><span>【编号】:{{randomID}}</span></el-col>
      <el-col :span="6"><span>【难度】:{{bzgData.difficulty | changeDifficulty}}</span></el-col>
      <el-col :span="6"><span>【标签】:{{bzgData.tags}}</span></el-col>
    </el-row>
    <!-- 学科行 -->
    <el-row class="subjectName">
      <el-col :span="6"><span>【学科】:{{bzgData.subjectName}}</span></el-col>
      <el-col :span="6"><span>【目录】:{{bzgData.directoryName}}</span></el-col>
      <el-col :span="6"><span>【方向】:{{bzgData.direction}}</span></el-col>
    </el-row>
    <!-- 题干行 -->
    <el-row class="question">
      <el-col><span>【题干】:</span></el-col>
      <el-col class="questiontext"><span v-html="bzgData.question"></span></el-col>
      <el-col><span>{{bzgData.questionType}} 选项:(以下选中的选项为正确答案)</span></el-col>
      <div class="onlyRead" v-if="bzgData.questionType !== '3'">
        <div class="questionAnswe" v-if="bzgData.questionType === '1'"><el-col  v-for="item in bzgData.options" :key="item.id" ><el-radio    :value="radio" :label="item.isRight">{{item.title}}:</el-radio></el-col></div>
        <div v-if="bzgData.questionType === '2'"><el-col v-for="item in bzgData.options" :key="item.id"><el-checkbox :true-label='1' :value="item.isRight" >{{item.title}}:</el-checkbox></el-col></div>
      </div>
    </el-row>
    <!-- 参考答案行 -->
    <el-row class="answertops">
      <el-col>【参考答案】：<el-button type="danger" size="medium" @click="videoShow = true">视频答案预览</el-button></el-col>
      <el-col v-if="videoShow"><video class="videoPPP" controls="controls" src="https://v-cdn.zjol.com.cn/277004.mp4"></video></el-col>
    </el-row>
    <!-- 答案解析行 -->
    <el-row class="answer">
      <el-col class="answertext">【答案解析】： </el-col>
      <el-col v-html="bzgData.answer"></el-col>
    </el-row>
    <!-- 题目备注行 -->
    <el-row  class="answer questiontt">
      <el-col class="answertext">【题目备注】：</el-col>
      <el-col>{{bzgData.remarks}}</el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose()" type="primary">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'preview',
  props: {
    showQuestion: {
      type: Boolean,
      default: false
    },
    randomID: {
      type: Number,
      default: 0
    }
  },

  watch: {
    randomID: {
      async handler (val) {
        // console.log(val)
        const res = await detail({ id: val })
        this.bzgData = res.data
        // console.log(res)
      }
    }
  },

  data () {
    return {
      bzgData: {},
      radio: 1,
      videoShow: false
    }
  },

  filters: {
    changeNumber (val) {
      if (val === '0') {
        return '单选'
      } else if (val === '1') {
        return '多选'
      } else {
        return '简答'
      }
    },
    changeDifficulty (val) {
      if (val === '0') {
        return '简单'
      } else if (val === '1') {
        return '一般'
      } else {
        return '困难'
      }
    }
  },

  created () {

  },

  computed: {

  },

  methods: {
    onClose () {
      this.videoShow = false
      this.$emit('close', false)
    }

  }

}
</script>

<style scoped lang='less'>
.questionType {
  margin-bottom: 20px;
}
.subjectName{
  margin-bottom: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid black;
}
.videoPPP{
  width: 400px;
  height: 300px;
}
.answer {
  // padding-bottom: 10px;
  border-bottom: 1px solid black;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  .answertext{
    width: 112px;
  }
}
.questiontext{
  color: blue;
}

.questionAnswe{
    margin-bottom: 10px;
}

.answertops{
  padding-bottom: 5px;
  border-bottom: 1px solid black;
}

.questiontt{
  border: none;
}

.el-col-24{
  margin-bottom: 15px;
}
</style>
